import { onMounted, onUnmounted } from "vue"
import { ECharts } from "echarts";

const useAutoPie = ()=>{
    let currentChart : ECharts | null = null
    let currentAutoTime : number = 3000
    let currentMaxIndex : number = 0
    let currentIndex : number = 0
    let timer : ReturnType<typeof setInterval> | null = null
    const auto = (chart : ECharts,time : number,maxIndex : number)=>{
        currentChart = chart
        currentAutoTime = time
        currentMaxIndex = maxIndex
        const action = ()=>{
            if(currentChart){
                currentChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: currentIndex })
                currentIndex += 1
                currentIndex %= currentMaxIndex
                currentChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: currentIndex })
            }
        }
        setTimeout(()=>{
            action()
        },1500)
        timer = setInterval(()=>{
            action()
        },currentAutoTime)
    }

    onMounted(()=>{
    })

    onUnmounted(()=>{
        clearInterval(timer!)
    })

    return { auto }
}

export default useAutoPie